<template>
  <div class="page-root">
    <BasePanel>
      <a-tabs class="tabs-wrap" v-model="tabIndex">
        <a-tab-pane key="0" tab="应用数据统计">
          <TabView1 v-if="tabIndex === '0'" />
        </a-tab-pane>
        <a-tab-pane key="1" tab="产品进件明细">
          <TabView2 v-if="tabIndex === '1'" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="机构进件明细">
          <TabView3 v-if="tabIndex === '2'" />
        </a-tab-pane>
      </a-tabs>
    </BasePanel>
  </div>
</template>

<script>
import TabView1 from './tabView1';
import TabView2 from './tabView2';
import TabView3 from './tabView3';
export default {
  components: {
    TabView1,
    TabView2,
    TabView3,
  },
  data() {
    return {
      tabIndex: '0',
    };
  },
};
</script>

<style lang="scss" scoped>
.BasePanel-root {
  padding: 10px 20px 20px;
}

.tabs-wrap {
  margin-bottom: 10px;
}

.table-wrap {
  margin-top: 16px;
}

.table-top-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.table-title {
  flex: 1;

  span {
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 18px;
      background-color: #1890ff;
      margin-right: 8px;
      position: relative;
      top: -1px;
    }
  }
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;

  &>button {
    margin-left: 12px;

    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
